<script lang="ts">
export default {
  name: 'user'
};
</script>

<script setup lang="ts">
import { reactive, ref, onMounted, toRefs } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { userListApi, stateUserApi } from '@/api/user'
import { ElForm } from 'element-plus';
const state = reactive({
  loading: false,
  userList: [],
  query: {
    phone: '',
    pageNumber: 1,
    pageSize: 5,
    total: 0
  }
})
const queryParams = reactive({
  keywords: '',
  status: ''
});

const queryFormRef = ref(ElForm); // 查询表单


const init = async () => {
  state.loading = true
  const { data } = await userListApi({
    page: state.query.pageNumber,
    size: state.query.pageSize,
    state: queryParams.status,
    phone: queryParams.keywords
  })
  state.userList =  data.data
  state.query.total = data.pageable.total
  state.loading = false
}

const resetQuery = () => {
  queryFormRef.value.resetFields();
  init()
}

const handleStatusChange = async (row: any) => {
    await stateUserApi({ id: row.id })
    init()
  }

// * 页码改变
const pageChange = (page: number) => {
  state.query.pageNumber = page;
  init();
};

// * 每页条数改变
const sizeChange = (size: number) => {
  state.query.pageNumber = 1;
  state.query.pageSize = size;
  init();
};
onMounted(() => {
  init()
})
const { loading, userList } = toRefs(state);
</script>

<template>
  <div class="app-container">
    <!-- 用户数据 -->
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="手机号"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="全部"
            clearable
            style="width: 200px"
          >
            <el-option label="启用" value="0" />
            <el-option label="禁用" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="init">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <el-table :data="userList" border v-loading="loading">
        <el-table-column
          key="id"
          label="编号"
          align="center"
          prop="id"
          width="100"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phone"
        />
        <el-table-column
          label="用户昵称"
          width="120"
          align="center"
          prop="userName"
        />

        <el-table-column
          label="性别"
          width="100"
          align="center"
          prop="gender"
        />
        <el-table-column label="头像"  style="width: 60px; height: 60px;  border-radius: 50%;">
						<template  #default="scope">
							<el-image  :src="scope.row.photo" style="width: 100px" />
						</template>
					</el-table-column>

        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <el-switch
              v-model="scope.row.state"
              :inactive-value="'0'"
              :active-value="'1'"
            />
          </template>
        </el-table-column>
        <el-table-column v-hasPerm="['prohibit']" label="操作">
          <template #default="scope">
            <el-button  :type="scope.row.state === '1' ? 'success': 'danger'" link @click="handleStatusChange(scope.row)">{{ scope.row.state === '1' ? '启用' : '禁用' }} </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-if="userList.length" :pageable="state.query" @page-change="pageChange"
        @size-change="sizeChange" />
    </el-card>
  </div>
</template>
